<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown.js" />
    <script type="text/javascript" language="javascript" src="#{request.contextPath}/resources/js/jquery.countdown-es.js" />

    <script type="text/javascript">

        function serverTime() {
            var horaServer = new Date(${poolAplicacionBean.stringFechaServer});
            return horaServer;
        }

    </script>  
    
    <script type="text/javascript">
        
        //función para cambiar el background del elemento
        //$.fn.background = function(_background){
        //    $(this).css({background: _background});
       // };

       // $(function(){
        //    $(".poolInfo").background("#df5900");            
       // });

    </script>
   
    
    <p:carousel id="carouselBannerPool"  value="#{poolAplicacionBean.pooles}" var="p" 
            rendered="#{fn:length(poolAplicacionBean.pooles)>0}"
            autoPlayInterval="7000"
            numVisible="1"
            vertical="true"
            circular="true">
        
        <h:panelGroup class="poolInfo" layout="block">
       
            
                <div class="poolDescripcion">

                    <h:outputText value="#{p.tipo.descrp} " style="font-size: 12px;"/>
                    <h:outputText value="#{p.nroPool}" style="font-size: 12px;" >
                        <f:convertNumber pattern="000" />
                    </h:outputText>
                    <br/>
                    
                    <h:outputLink value="#{application.contextPath}/reserva-venta-especial/#{p.codigoAcceso}" >
                        <h:outputText value="#{p.descripcion}" style="font-weight: bold;" />                       
                    </h:outputLink>

                </div>

                <div class="poolCantidades">
                    
                    <h:outputLink value="#{application.contextPath}/reserva-venta-especial/#{p.codigoAcceso}" >
                        <div class="cantDisponible">
                        <h:outputText value="#{p.cantidadDisponible}" style="margin: 10px;">
                           <f:convertNumber pattern="0"/>
                        </h:outputText>
                          #{p.unidadMedida} disponibles
                        </div>
                        
                        <!--                        
                       <p:effect type="pulsate" event="load" delay="1">
                            <f:param name="mode" value="show" />
                       </p:effect>
                        -->

                    </h:outputLink>

                    <div class="poolBarraPorcentaje">

                        <p:progressBar id="porcentajeVenta"
                              value="#{p.porcentaje}" labelTemplate="{value}% Vendido"
                              displayOnly="true" style="height: 15px; width: 220px; font-size: 10px;"   >

                            <!--
                           <p:effect type="shake" event="load" delay="1">
                                <f:param name="mode" value="show" />
                           </p:effect>
                            -->
                       </p:progressBar>

                    </div>                                            
                </div>

                <div class="poolContador" id="bannerPool">

                    <script type="text/javascript">
                        $(function () {
                            var fechaFin = new Date(#{aplicacionBean.fechaFin(p)} );
                            $('#defaultCountdown#{p.nroPool}').countdown({until: fechaFin, serverSync: serverTime()});
                        });
                    </script>

                    <div class="poolFinaliza" > Tiempo disponible </div>
                    <div id="defaultCountdown#{p.nroPool}" ></div>

                </div>

                <h:panelGroup layout="block" styleClass="poolBoton" rendered="#{p.activa}" >

                    <h:outputLink value="#{application.contextPath}/reserva-venta-especial/#{p.codigoAcceso}" >
                        <div>
                          <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/33_info.png" width="32" height="32" />
                        </div>
                        <div>
                          <h:outputText value="+ Info" rendered="#{p.activa}"/>
                        </div>
                    </h:outputLink>

                </h:panelGroup>

            <h:panelGroup layout="block" styleClass="poolBoton" rendered="#{p.activa}">

                    <h:outputLink value="#{application.contextPath}/reserva-venta-especial/#{p.codigoAcceso}" >                        
                        <div>
                            <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/iconos/boton-carrito.png" width="32" height="32" />
                        </div>
                        <div>
                          <h:outputText value="Reservar" rendered="#{p.activa}"/>
                        </div>
                    </h:outputLink>

                </h:panelGroup>

                <h:panelGroup layout="block" styleClass="poolAgotado" rendered="#{not p.activa}"
                              style="z-index:90;">

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesDefault}/pool/agotado.png"
                                    height="50" style="z-index: 999;" />

                </h:panelGroup>

         
    </h:panelGroup>
       
            
    </p:carousel>

</ui:composition>
